<template>
  <div class="orderCanceling">
    <div class="order_info">
      <div class="order_main flex">
        <div class="order_l">
          <p>订单编号：</p>
          <p>下单时间：</p>
          <p>预约时间：</p>
          <p>支付方式：</p>
           <p>服务类型：</p>
          <p>红包抵扣：</p>
          <p>用户：</p>
          <p>车辆：</p>
          <!-- <p>车牌号：</p> -->
          <p>地址：</p>
        </div>
        <div class="order_r">
          <p class="order_number">{{info.ordersn}}</p>
          <p>{{info.dateline}}</p>
          <p>{{info.meal_timestamp}}</p>
          <p v-if="info.pay_type == 1">余额支付</p><p v-if="info.pay_type == 2">在线支付</p><p v-if="info.pay_type == 4">次卡支付</p>
          <p>{{info.service}}</p>
          <p>{{info.coupon}}</p>
          <p>{{info.username}}</p>
          <p>{{info.mycar}}</p>
          <p>{{info.mycard_sn}}</p>
          <p>{{info.address}}</p>
        </div>            
      </div>
      <p class="order_addr">地址详情：{{info.addr_detail}}</p>
      <div class="order_sum">
        <p>订单金额：</p>
        <!-- <p class="order_sum_actual">{{info.totalprice}}</p>
        <p>实际收入</p> -->
        <p class="order_sum_actual">{{info.paymoney}}元</p>
      </div>
    </div>
    <div class="order_reason">
      <p class="order_reason_tit">请输入拒绝理由：</p>
      <textarea class="order_text" rows="4" placeholder="请输入拒绝理由" v-model="content"></textarea>
    </div>
    <button class="order_btn" @click="confirm()">确认取消</button>
    <!-- <button class="order_btn" @click="confirm2(info.id)">确认取消2</button> -->
    <!-- 更新经纬度 -->
    <!-- <lat-lng></lat-lng> -->
  </div>
</template>




<script type="text/javascript">
import axios from 'axios'
import global from '../../../utils/global'
import store from '../../../utils/store'
let qs = require('qs');
export default {
  name: 'orderCanceling',
  data () {
    return {
      info: {},
      content:'',
    }
  },
  mounted() {
    // console.log(this.$route.params.order_id);
    // var id = this.$route.params.order_id;
    this.getInfo();
    this.$root.share();
    // console.log(global.order_id);
  },
  methods: {
    // 确定取消
    confirm(){
      var that = this;
      if(that.content == '') {
        alert("请填写订单拒绝理由！");
      } else {
        axios.get(global.api.order.customer.refund,{
          params: {
            uuid: localStorage.getItem('carWashUuid'),
            orderid: global.order_id,
            reason: that.content,
          }
        })
        .then(function(res){
          console.log("confirm then");
          console.log(res);
          if (res.data.error == 0) {
            // window.location.href = '/index.html#/';
            that.$router.push({path:'/'})
          }
        })
        .catch(function(res){
          console.log("confirm catch");
          console.log(res);
        })
      }

    },
    // 获取信息
    getInfo(){
      
      console.log(global.order_id);
      var that = this;
      axios.get(global.api.order.customer.info,{
        params: {
          uuid: localStorage.getItem('carWashUuid'),
          order_id: global.order_id,
        }
      })
      .then(function(res){
        console.log("getInfo then");
        console.log(res);
        that.info = res.data.order;
      })
      .catch(function(res){
        console.log("getInfo catch");
        console.log(res);
      }) 
    },
  },
}
</script>



<style scoped>
  button:focus,textarea:focus{
    outline-offset: 0px;
    outline: -webkit-focus-ring-color auto 0px;
  }
  .orderCanceling{}
  .order_info{
    text-align: left;
    border-bottom: 1px solid #B3B3B4;
    padding: 1.5rem 0.5rem 1rem;
    position: relative;
  }
  .order_info p{
    margin: 0;
    padding: 0;
  }
  .order_main{
    justify-content: flex-start;
    align-items: flex-start;
  }
  .order_l{
    /*width: 5rem;*/
    display: table;
    text-align: right;
  }
  .order_r{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
  }
  .order_main p {
    /*margin: 0 auto;*/
    line-height: 1.8rem;
    font-size: 0.9rem;
  }
  .order_number{
    max-width: 55%;
    /*text-align: left;*/
  }
  .order_addr{
    line-height: 1.8rem;
    font-size: 0.9rem;
  }
  /*金额*/
  .order_sum{
    position: absolute;
    right: 0.5rem;
    top: 1.5rem;
    text-align: right;
    font-size: 0.8rem;
    color: #595757;
    line-height: 1.8rem;
  }
  .order_sum_actual{
    font-size: 1.5rem;
  }
  /*拒绝*/
  .order_reason{
    padding: 1rem 0.5rem 0;
  }
  .order_reason_tit{
    width: 100%;
    text-align: left;
    font-size: 0.9rem;
  }
  .order_text{
    width: 90%;
    border: 1px solid #B3B3B4;
    padding: 1rem 5%;
    margin: 1rem 0;
    font-size: 1.1rem;
  }
  /*确认取消*/
  .order_btn{
    width: 8rem;
    height: 2.5rem;
    line-height: 2.5rem;
    background-color: #FF2976;
    color: #fff;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    margin: 1rem 0 2rem;
  }
</style>
<style>
  ul,li,div,a,p,span{
    margin: 0;
    padding: 0;
  }
  li{
    list-style: none;
  }
  .flex{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  }
  .side_start{
    justify-content: space-between;
    align-items: flex-start;
  }
</style>